<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>西南石油大学电子邮件系统</title>
		
		<script>
			function fnLogin()
			{
				var uname=document.getElementById("input_user")
				var password=document.getElementById("input_pwd")
				if(uname.value.length==0)
				{
					document.getElementById("tip").style.display = "block";
				}
				else if(uname.value==123&&password.value==123)
				{
					window.location="http://www.swpu.edu.cn/";
				}
			}
		</script>
		
		<style type="text/css">
			#page{
				background-color: white;
				height:600px;
				border:1px;
				
				margin: auto;
			}
			#page_head{
				height:76px;
				line-height:90px; 
				background:#f5f5f5; 
				border-bottom:1px solid #e5ecf0; 
				overflow:hidden;
			}
			#page_body{
				width: 964px;
				height: 460px;
				margin: auto;
				background-image:url(img/login_bg_02.jpg);
			}
			#page_foot{
				height: 60px;
				width: 964px;
				background-color: #f5f5f5;
				margin: auto;
				text-align: center;
				padding-top: 15px;
			}
			#h{
				width: 964px;
				height: 76px;
				margin: auto;
			}
			#logo{
				 padding-top:15px;
				 float:left;
				 margin: auto;
			}
			.help{
				float:right; font-size:14px; font-weight:700; color:#787878; text-decoration:none;
				margin: auto;
			}
			#login{
				margin-top: 60px;
				margin-left: 550px;
				width: 380px;
				height: 350px;
				position: absolute;
				background-color: white;
			}
			#loginTitle{
				width:380px;height: 40px;
				padding-top:10px ;
				background-color: orange;
				text-align: center;color: #fff;fo accelerator: 16px;
			}
			#tip{display: none;
				height: 30px;
				width: 320px;
				background-color: #cc3300;color: white;
				text-align: center;line-height: 30px;
				margin: auto;
				
			}
			.textitem1{
				position: absolute;
				height: 40px;
				left:30px;
				top:100px
			}
			.textitem2{
				position: absolute;
				height: 40px;
				left:30px;
				top:160px
			}
			.btn{
				height: 38px;width: 120px;
				border: none;
				color: #fff;
				font-weight: 400;font-size: 18px;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="page_head">
				<div id="h">
					<div id="logo">
						<img src="img/login_logo.png" />
					</div>
					<a href="http://mail.swpu.edu.cn/?q=help" target="_blank" class="help">帮助</a>
				</div>
			</div>
			<div id="page_body">
				<div id="login">
					<div id="loginTitle">
						<b>账号登录</b>
					</div>
					<div id="tip">
						请填写用户名
					</div>
					<div class="textitem1">
						<input style="width: 320px;height: 30px;" id="input_user" type="text" name="zh" placeholder="用户名" />
					</div>
					<div class="textitem2">
						<input style="width: 320px;height: 30px;"id="input_psw" type="text"name="zh" placeholder="密码" />
					</div>
					<div style="position: absolute;left: 30px;top: 220px;width: 320px;">
						<span style="color: red;float: left;">学生选择@stu.swpu.edu.cn</span>
						<a href="http://mail.swpu.edu.cn/?q=resetpw"style="float: right;">忘记密码</a>
					</div>
					<div style="position: absolute;left: 30px;top: 260px;width: 320px;">
						<input onclick="fnLogin()"style="float: right;background: url(img/login_btn.jpg);" class="btn" type="submit" value="登录" />
					</div>
				</div>
			</div>
			<div id="page_foot">
					<p>西南石油大学</p>
			</div>
		</div>
	</body>
</html>
